
body{
  background: #300273;
}
.banner-content {
  width: 100%;
  height: 867px;
  background: url("../images/yun_gong_chang/bannerbg.jpg") no-repeat top center;
  background-size: 100% 100%;
  position: relative;
  .banner-head-img{
    position: absolute;
    top:-10px;
    right:0px;
  }
  .banner-text-box {
    width: 1200px;
    margin: 0 auto;
  }
  .banner-text {
    padding-top: 132px;
    color: #fff;
    width: 680px;
    > p {
      width: 642px;
      font-size: 16px;
      margin-top: 28px;
      line-height: 32px;
      text-align: justify;
    }
    .btn {
      width: 138px;
      height: 34px;
      border-radius: 5px;
      margin-top: 85px;
      background: transparent;
      border: 1px solid #ffffff;
      color: #fff;
      &.active {
        background: #1df6ec;
        color: #1c0e5c;
        border: 1px solid #1df6ec;
      }
    }
    .contactus {
      margin-left: 25px;
    }
    .tiyan {

    }
  }

}

// 01 云工厂优势
.youshi_big_box {
  position: relative;
  min-height: 770px;
}

.youshiContent {
  margin-left: 278px;
  position: relative;
  height: 508px;
  border-radius: 3px 0 0 3px;
  background: #fff;
  .title-01 {
    position: absolute;
    left: -155px;
    top: -100px;
  }
  .mask {
    position: absolute;
    top: 100px;
    left: -278px;
    z-index: -1;
  }
  .text-box {
    padding-left: 34px;
    padding-top: 108px;
    padding-right: 35px;
    width: 298px;
    .title {
      font-size: 36px;
      color: #2a2a2a;
    }
    .blue-line {
      width: 20px;
      height: 6px;
      margin-top: 27px;
      margin-bottom: 30px;
      background: #300b79;
    }
    .title-desc {
      color: #656f90;
      font-size: 20px;
      line-height: 40px;
    }
  }
  .text-box-right {
    //padding-top: 57px;
    //margin-left: 298px;
    position: relative;
    min-height: 100px;
    > li {
      width: 656px;
      height: 471px;
      position: absolute;
      top: 57px;
      overflow: hidden;
      //transition: 1s ease all;
      &:nth-child(1) {
        top: 56px;
        left: 0;
        z-index: 10;
      }
    ;
      &:nth-child(2) {
        left: 216px;
        z-index: 9;
      }
    ;
      &:nth-child(3) {
        //width: 217px;
        left: 445px;
        z-index: 8;
      }
    ;
      &:nth-child(4) {
        //width: 217px;
        left: 671px;
        z-index: 7;
      }
      &.hover {
        box-shadow: 0px 40px 85px 0px rgba(10, 1, 23, 0.9);
        .img-mask {
          display: none;
        }
      }
      .centerimg {
        width: 656px;
        height: 471px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .img-title {
        position: absolute;
        right: 22px;
        bottom: 27px;
      }
      .img-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: rgba(0, 0, 0, .6);
      }
    }
  }
}

.white-bg-juxing {
  width: 83px;
  height: 504px;
  background: #fff;
  margin-top: 185px;
  //position: absolute;
  //left:0;
  //top:185px;
}

.two-content {
  position: relative;
}

.chang_jing_box {
  width: 1200px;
  margin: 0 auto;
}

.left-person, .right-person {
  position: absolute;
}

.left-person {
  top: 480px;
  left: 0;
}

.right-person {
  right: 0;
  bottom: -75px
}

.chang_jing_item {
  color: #fff;
  margin-bottom: 158px;
  .img_box {
    width: 702px;
    height: 409px;
    margin-right: 40px;
    position: relative;
    &.qu_bie {
      margin-right: 0;
      margin-left: 40px;
    }
    > img {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 10;
    }
    .border-line {
      width: 100%;
      height: 100%;
      border: 2px solid #fff;
      position: absolute;
      top: 15px;
      z-index: 9;
      &.default-right {
        right: -15px;
      }
      &.default-left {
        left: -15px;
      }
    }
  }

  .title {
    font-size: 34px;
    font-weight: 500;
  }

  .big_line {
    width: 66px;
    height: 10px;
    border-radius: 10px;
    margin: 32px 0 46px;
    background: linear-gradient(left, #4e3ef0, #12ccfb);
    background: -webkit-gradient(linear, left top, right top, from(#4e3ef0), to(#12ccfb));
  }

  .desc {
    font-size: 18px;
    line-height: 36px;
  }

}

.three-title {
  margin-left: 165px;
  margin-bottom: 139px;
}

.three-content {
  padding-top: 136px;
}

.white-bg-content {
  min-height: 500px;
  background: #fff;
  position: relative;
  padding-top: 500px;
  padding-bottom: 200px;
  .MackBook {
    width: 1352px;
    height: 797px;
    background: url("../images/yun_gong_chang/Macbook.png") no-repeat top center;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: -226px;
    margin-left:-676px;
    //-webkit-transform: translateX(-50%);
    //-moz-transform: translateX(-50%);
    //-ms-transform: translateX(-50%);
    //-o-transform: translateX(-50%);
    //transform: translateX(-50%);
  }
  .playBtn {
    position: absolute;
    top: 310px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 100;
  }
  .video-container{
    width:1015px;
    height: 670px;
    position: absolute;
    top:36px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    background: #000000;
  }
  .video{
    width: 100%;
    height: 100%;
  }
}

.anlie_item {
  width: 600px;
  height: 377px;
  margin-top: 120px;
  padding: 10px;
  cursor:pointer;
  -webkit-transition: 1s ease transform;
  -moz-transition: 1s ease transform;
  -ms-transition: 1s ease transform;
  -o-transition: 1s ease transform;
  transition: 1s ease transform;
  &:hover {
    box-shadow: 0 42px 86px 0 rgba(0, 68, 139, 0.1);
    transform: translateY(-10px);
  }
  .right-desc {
    padding-left: 10px;
  }
  .right-title {
    font-size: 32px;
    color: #394d89;
    margin-top: 54px;
  }
  .right-text {
    font-size: 16px;
    color: #656f90;
    line-height: 32px;
  }
  //.three-img-box{
  //  width: 302px;
  //  position: relative;
  //  >img{
  //    width: 82%;
  //    position: absolute;
  //    top:50px;
  //    left:50%;
  //    transform: translateX(-50%);
  //  }
  //}

}

.bottom-contact-box {

}

.center-bottom-box {
  padding-top: 90px;
  text-align: center;
  color: #fff;
  .one-line {
    display: inline-block;
    width: 3px;
    height: 72px;
    background: #fff;
  }
  .contactUsText {
    font-size: 46px;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 28px;
  }
  .bottom-form {
    margin-top: 75px;
  }
  .item {
    width: 324px;
    text-align: left;
    > p {
      font-size: 22px;
      margin-bottom: 20px;
    }

  }
  input, .selectl {
    font-size: 16px;
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
  }
  input {
    padding-left: 10px;
  }
  .liuyan {
    width: 100%;
    height: 188px;
    border-radius: 5px;
    margin: 53px 0;
    padding:15px;
    font-size:16px;
  }

  .bottom-submit {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    border: none;
    background: #1df6ec;
    color: #2b3f91;
    font-size: 22px;
  }

  .copyRite {
    text-align: center;
    font-size: 22px;
    margin-top: 220px;
    margin-bottom: 44px;
  }
}


//.flash4 {
//  width: 1265px;
//  height: 471px;
//  position: relative;
//}
//
//.flash4 ul li {
//  width: 106px;
//  height: 471px;
//  position: relative;
//  overflow: hidden;
//  float: left;
//}
//
//.flash4 ul li .imgTop img {
//  height: 471px;
//  opacity: 0.4;
//  max-width: none;
//}
//
//.flash4 ul li .imgTop img.tm {
//  opacity: 1;
//}
//
//.flash4 ul li .imgCon {
//  width: 656px;
//  height: 405px;
//}
//
//.flash4 ul li .imgCen {
//  width: 538px;
//  height: 50px;
//  background: rgba(0, 0, 0, 0.5);
//  color: #fff;
//  font-size: 20px;
//  line-height: 50px;
//  position: absolute;
//  left: 0px;
//  bottom: 45px;
//  text-indent: 20px;
//  display: none;
//}
//
//
//
////.flash4 ul li .imgBot p.bt_2 {
////  width: 458px;
////  height: 45px;
////  line-height: 45px;
////  float: left;
////  display: none;
////}
//
//.flash4 ul li.first {
//  width: 656px;
//}
//
//.flash4 ul li.fast {
//  position: absolute;
//  right: 0px;
//  bottom: 0px;
//}
